import React, {useState} from 'react';
import Copy from './copy-text/Copy';

import './index.scss';
import {Button} from 'antd';
import FcDemo from './create-react-fc-demo/FcDemo';
import ReactPropsWithChildren from './create-react-fc-demo/PropsWithChildren';
import FC from './create-react-fc-demo/NomalCreateFc';
import UseStateHook from './create-react-fc-demo/hooks/UseState';
import UseRefDemo from './create-react-fc-demo/hooks/UseRef';
import UseEffectDemo from './create-react-fc-demo/hooks/UseEffect';
export default function StyledCss() {
  const [state, setState] = useState<string>('复制的文本是forwordof学习');
  return (
    <>
      {/* 样式隐藏学习 */}
      <div className="display-styled">1111</div>

      <div className="display-flex">
        <Copy text={JSON.stringify(state)}>
          {/* 这个dom结构就是 children属性的值 */}
          <Button type="primary" className="book-account-button">
            复制
          </Button>
        </Copy>

        {/* 使用Recat.FC 创建的demo */}
        <FcDemo text={'使用React.Fc 创建的函数'}></FcDemo>
        {/* 使用react.PropsWithChildren创建函数  */}
        <ReactPropsWithChildren text={'使用react.PropsWithChildren创建的函数'}></ReactPropsWithChildren>
        {/* 直接创建的函数 */}
        <FC text={"直接创建的函数--值得推荐 可读性强"}></FC>

        {/* hooks 中 useState的一些用法和准则 */}
        <UseStateHook></UseStateHook>

        {/* hooks 中的 useRef的用法和准则 */}
        <UseRefDemo></UseRefDemo>

        {/* hooks 中的UseEffect的基础用法 */}
        <UseEffectDemo></UseEffectDemo>
      </div>
    </>
  );
}
